/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity, StatusBar, Platform, TouchableHighlight, TouchableWithoutFeedback, Dimensions, Image} from 'react-native';

import Common from '../../component/common';

import LinearGradient from 'react-native-linear-gradient';

import Swiper from 'react-native-swiper';

import Detail from './detail';

import MoreProgram from './moreProgram';

import NewsList from './newsList';

import Article from './article';

const totalWidth = Dimensions.get('window').width;

const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 20;

export default class Ranking extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      height: 0,
      scrollToHeight: 0,
    };
  }
  switch = () =>{
    if(!this.state.open && this.state.height == 0){
      this.setState({height : null});
      this.props.onPress(this.state.scrollToHeight);
    }else{
      this.setState({height : 0});
    }
    this.state.open?this.setState({open: false}):this.setState({open: true});
  };
  updown = (data) =>{
    var updown = {};
    if(data > 0){
      updown.change = data;
      updown.color = '#ff4546';
      updown.icon = require('../../images/up.png');
    }else if(data < 0){
      updown.change = -data;
      updown.color = '#62d474';
      updown.icon = require('../../images/down.png');
      // updown.icon = require('../../images/up.png');
    }else{
      updown.change = "";
      updown.icon = require('../../images/still.png');
    }
    return updown;
  };
  listRow = (rowData,idx,type) => {
    var updown = this.updown(rowData.rankingChanged);
    return (
      <TouchableHighlight key={idx} underlayColor="#fafafa" delayPressIn={100} onPress={() => Common.onForward(this,Detail,type,rowData.id)}>
        <View style={styles.listrow} >
          <View style={[styles.rank,styles.viewRow]}>
            <Text style={styles.rankIndex}>{idx+1}</Text>
            <View style={styles.rankChange}>
              <Image style={styles.updown} source={updown.icon} />
              <Text style={{color: updown.color}}>{updown.change}</Text>
            </View>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={2} style={[styles.head,{fontSize: 13}]}>{rowData.title}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text numberOfLines={1} style={[styles.head,{fontSize: 13}]}>{rowData.source}</Text>
          </View>
          <View style={[styles.rank,styles.viewRow]}>
            <Text style={[styles.head,{fontSize: 13}]}>{rowData.indexNumber}</Text>
          </View>
        </View>
      </TouchableHighlight>
    )
  };
  onLayout = (e) => {
    var scrollToHeight = e.nativeEvent.layout.y - totalWidth*0.1 - STATUS_BAR_HEIGHT;
    this.setState({scrollToHeight:scrollToHeight});
  };
  render() {
    var rowData = this.props.data;
    var arr = [];
    rowData.resultList.map((val,idx) => {
      if(idx<3){
        var updown = this.updown(val.rankingChanged);
        arr.push(updown);
      }
    });
    if(rowData.type == 4){
      var height = totalWidth*0.12;
      var width = totalWidth;

       let containerStyle = {};
      let pageStyle = {};

      if (Platform.OS == 'android') {
        let offset = (height - width) / 2;
        containerStyle.transform = [{rotate: "90deg"}];
        containerStyle.width = height;
        containerStyle.height = width;
        containerStyle.top = offset;
        containerStyle.left = offset * -1;

        pageStyle.transform = [{rotate: "-90deg"}];
        pageStyle.width = width;
        pageStyle.height = height;
        pageStyle.top = offset * -1;  //left
        pageStyle.right = offset  * -1;   //top
      } else {
        containerStyle.flex = 1;
        pageStyle.flex = 1;
      }
      if(rowData.resultList && rowData.resultList.length){
        return(
          <TouchableWithoutFeedback onPress={() => {Common.onForward(this,NewsList)}}>
          <View style={[styles.typeRow,{marginTop: 10}]}>
            <View style={styles.title}>
              <View style={styles.titleL}>
                <View style={styles.icon}></View>
                <Text style={styles.text}>{rowData.title}</Text>
                <LinearGradient start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 0.0}} colors={['rgba(255,226,226,1)','rgba(255,226,226,1)', 'rgba(255,226,226,0)']} style={{flex: 1,height: 1}} />
              </View>
            </View>
            <View style={{width: totalWidth,height: totalWidth*0.12}}>
              <View style={[containerStyle]}>
                <Swiper
                autoplay={true}
                autoplayTimeout={2}
                height={totalWidth*0.12}
                showsPagination={false}
                horizontal={Platform.OS == 'android'}
                width={Platform.OS == 'android' ? height : width}
                height={Platform.OS == 'android' ? width : height}
                >
                {
                  rowData.resultList.map((val,idx) => {
                    return (
                      <View key = {idx} style={pageStyle}>
                        <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={() => Common.onForward(this, Article, val, 4)} style={{flexDirection: 'row', paddingHorizontal: totalWidth*0.08, paddingVertical: totalWidth*0.02, alignItems: 'center'}}>
                          {/*<View style={{marginRight: totalWidth*0.02,borderColor: '#fe4646',borderWidth: 1,borderRadius: 2,paddingHorizontal: 3,alignItems: 'center', justifyContent: 'center'}}>
                          <Text style={{color: '#fe4646',fontSize: 12}}>{val.tag}</Text>
                          </View>*/}
                          <Text style={{flex: 1,fontSize: 13, color: '#505050'}} numberOfLines={1}>{val.title}</Text>
                        </TouchableHighlight>
                      </View>
                    )
                  })
                }
                </Swiper>
              </View>
            </View>
            </View>
          </TouchableWithoutFeedback>
        ) 
      }else{
        return null
      }
    }else{
      return (
        <View style={styles.typeRow} onLayout={this.onLayout}>
          <View style={styles.title}>
            <View style={styles.titleL}>
              <View style={styles.icon}></View>
              <TouchableOpacity activeOpacity={1} onPress={() => Common.onForward(this, MoreProgram,rowData.title,rowData.type)}>
                <Text style={styles.text}>{rowData.title}</Text>
              </TouchableOpacity>
              <LinearGradient start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 0.0}} colors={['rgba(255,226,226,1)','rgba(255,226,226,1)', 'rgba(255,226,226,0)']} style={{flex: 1,height: 1}} />
            </View>
            {/*<TouchableOpacity style={{flex:1}}>
              <Image style={styles.drag} source={require('../../images/drag.png')} />
            </TouchableOpacity>*/}
          </View>
          <View style={styles.three}>
            <TouchableHighlight style={styles.first} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[0].id)}>
              {rowData.resultList[0].pic1Path?
                <Image style={styles.first} source={{uri: rowData.resultList[0].pic1Path}}>
                  <Image style={styles.ranking} source={require('../../images/flag2.png')}>
                    <Text style={styles.rankingR}>1</Text>
                  </Image>
                  <View style={styles.tips}>
                    <Text style={styles.tipsT} numberOfLines={1}>{rowData.resultList[0].title}</Text>
                    <View style={styles.tipsNIC}>
                      <Text style={styles.tipsN}>{rowData.resultList[0].indexNumber}</Text>
                      <View style={styles.tipsIC}>
                        <Image style={styles.tipsI} source={arr[0].icon} />
                        <Text style={styles.tipsC}>{arr[0].change}</Text>
                      </View>
                    </View>
                  </View>
                </Image>:
                <View style={styles.first}>
                  <Image style={styles.ranking} source={require('../../images/flag2.png')}>
                    <Text style={styles.rankingR}>1</Text>
                  </Image>
                  <View style={styles.tips}>
                    <Text style={styles.tipsT} numberOfLines={1}>{rowData.resultList[0].title}</Text>
                    <View style={styles.tipsNIC}>
                      <Text style={styles.tipsN}>{rowData.resultList[0].indexNumber}</Text>
                      <View style={styles.tipsIC}>
                        <Image style={styles.tipsI} source={arr[0].icon} />
                        <Text style={styles.tipsC}>{arr[0].change}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              }
            </TouchableHighlight>
            <View style={styles.two}>
              <TouchableHighlight style={styles.second} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[1].id)}>
                {rowData.resultList[1].pic2Path?
                  <Image style={styles.one} source={{uri: rowData.resultList[1].pic2Path}}>
                    <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                      <Text style={styles.rankingoneR}>2</Text>
                    </Image>
                    <View style={styles.tipsone}>
                      <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[1].title}</Text>
                      <View style={styles.tipsoneNIC}>
                        <Text style={styles.tipsoneN}>{rowData.resultList[1].indexNumber}</Text>
                        <View style={styles.tipsoneIC}>
                          <Image style={styles.tipsoneI} source={arr[1].icon} />
                          <Text style={styles.tipsoneC}>{arr[1].change}</Text>
                        </View>
                      </View>
                    </View>
                  </Image>:
                  <View style={styles.one}>
                    <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                      <Text style={styles.rankingoneR}>2</Text>
                    </Image>
                    <View style={styles.tipsone}>
                      <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[1].title}</Text>
                      <View style={styles.tipsoneNIC}>
                        <Text style={styles.tipsoneN}>{rowData.resultList[1].indexNumber}</Text>
                        <View style={styles.tipsoneIC}>
                          <Image style={styles.tipsoneI} source={arr[1].icon} />
                          <Text style={styles.tipsoneC}>{arr[1].change}</Text>
                        </View>
                      </View>
                    </View>
                  </View>
                }
              </TouchableHighlight>
              <TouchableHighlight style={styles.third} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={() => Common.onForward(this,Detail,rowData.type,rowData.resultList[2].id)}>
                {rowData.resultList[2].pic2Path?
                  <Image style={styles.one} source={{uri: rowData.resultList[2].pic2Path}}>
                    <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                      <Text style={styles.rankingoneR}>3</Text>
                    </Image>
                    <View style={styles.tipsone}>
                      <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[2].title}</Text>
                      <View style={styles.tipsoneNIC}>
                        <Text style={styles.tipsoneN}>{rowData.resultList[2].indexNumber}</Text>
                        <View style={styles.tipsoneIC}>
                          <Image style={styles.tipsoneI} source={arr[2].icon} />
                          <Text style={styles.tipsoneC}>{arr[2].change}</Text>
                        </View>
                      </View>
                    </View>
                  </Image>:
                  <View style={styles.one} source={{uri: rowData.resultList[2].pic2Path}}>
                    <Image style={styles.rankingone} source={require('../../images/flag3.png')}>
                      <Text style={styles.rankingoneR}>3</Text>
                    </Image>
                    <View style={styles.tipsone}>
                      <Text style={styles.tipsoneT} numberOfLines={1}>{rowData.resultList[2].title}</Text>
                      <View style={styles.tipsoneNIC}>
                        <Text style={styles.tipsoneN}>{rowData.resultList[2].indexNumber}</Text>
                        <View style={styles.tipsoneIC}>
                          <Image style={styles.tipsoneI} source={arr[2].icon} />
                          <Text style={styles.tipsoneC}>{arr[2].change}</Text>
                        </View>
                      </View>
                    </View>
                  </View>
                }
              </TouchableHighlight>
            </View>
            <TouchableHighlight style={styles.switch} activeOpacity={0.5} underlayColor='#fff' delayPressIn={100} onPress={this.switch} >
              {this.state.open?
                <View style={styles.swBox}>
                  <Text style={styles.swText}>{'收起\n全部'}</Text>
                  <Image style={styles.swImg} source={require('../../images/close.png')} />
                </View>:
                <View style={styles.swBox}>
                  <Text style={styles.swText}>{'展开\n全部'}</Text>
                  <Image style={styles.swImg} source={require('../../images/open.png')} />
                </View>
              }
            </TouchableHighlight>
          </View>
          <View style={[styles.list,{height: this.state.height}]}>
            <View style={{marginBottom: 10}}>
              <View style={styles.listrow}>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>排名</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>节目名称</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>媒体</Text>
                </View>
                <View style={styles.viewRow}>
                  <Text style={styles.head}>报道指数</Text>
                </View>
              </View>
              {
                rowData.resultList.map((val, idx) => {
                  return idx>2?this.listRow(val, idx, rowData.type):null
                })
              }
            </View>
            <LinearGradient start={{x: 0.0, y: 0.0}} end={{x: 1.0, y: 0}} colors={['rgba(214,214,214,0)','rgba(214,214,214,1)', 'rgba(214,214,214,0)']} style={styles.line}/>
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={() => Common.onForward(this, MoreProgram,rowData.title,rowData.type)} style={styles.showAllW}>
              <View style={styles.showAll}>
                <Text style={styles.showAllText}>查看完整榜单</Text>
                <Image style={styles.showAllIcon} source={require('../../images/me/next.png')} />
              </View>
            </TouchableHighlight>
          </View>
        </View>      
      )
    }
  }
}

const styles = StyleSheet.create({
  typeRow: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingTop: totalWidth*0.03,
    marginBottom: 10
  },
  title: {
    flexDirection: 'row',
    marginBottom: 10,
    paddingHorizontal: totalWidth*0.035,
  },
  titleL: {
    flex: 15,
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    width: 2,
    height: 2,
    borderRadius: 1,
    backgroundColor: '#ff4546',
  },
  text: {
    color: '#fe4646',
    fontSize: 15,
    marginLeft: 2,
    marginRight: 10,
  },
  drag: {
    justifyContent: 'flex-end'
  },
  three: {
    flex:1,
    flexDirection: 'row',
    paddingHorizontal: totalWidth*0.035,
    marginBottom: 10,
  },
  ranking: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.1,
    height: totalWidth*0.113,
    resizeMode: 'contain',
  },
  rankingL: {
    color: '#ffffff',
    fontSize: 8
  },
  rankingR: {
    color: '#ffffff',
    fontSize: 16
  },
  rankingone: {
    position: 'absolute',
    top: -1,
    left: totalWidth*0.036,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
    width: totalWidth*0.067,
    height: totalWidth*0.076,
    resizeMode: 'contain'
  },
  rankingoneL: {
    color: '#ffffff',
    fontSize: 6
  },
  rankingoneR: {
    color: '#ffffff',
    fontSize: 10,
  },
  tips: {
    flex: 1,
    marginTop: totalWidth*0.3,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: "center",
    backgroundColor: '#ffffff',
    opacity: 0.8,
    paddingVertical: 3,
  },
  tipsT: {
    color: '#000000',
    fontSize: 12,
    maxWidth: totalWidth*0.25,
    marginLeft: totalWidth*0.01,
  },
  tipsNIC: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: totalWidth*0.01,
  },
  tipsN: {
    color: '#ff4546',
    fontSize: 25,
    marginRight: 4,
  },
  tipsIC: {
    flexDirection: 'row',
    alignSelf: 'flex-end',
    alignItems: 'flex-end',
    marginBottom: totalWidth*0.008,
  },
  tipsI: {
    flexDirection: 'row',
    width: totalWidth*0.024,
    height: totalWidth*0.024,
    marginBottom: totalWidth*0.008,
    resizeMode: 'contain'
  },
  tipsC: {
    fontSize: 14,
    color: '#ff4546',
  },
  tipsone: {
    flex: 1,
    marginTop: totalWidth*0.12,
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: '#fff',
    opacity: 0.8,
  },
  tipsoneT: {
    color: '#000000',
    fontSize: 10,
    maxWidth: totalWidth*0.2,
    marginLeft: totalWidth*0.01,
  },
  tipsoneNIC: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'flex-end',
    marginRight: totalWidth*0.01,
  },
  tipsoneN: {
    color: '#ff4546',
    fontSize: 20,
  },
  tipsoneIC:{
    flexDirection: 'row',
    alignItems: 'flex-end',
    alignSelf: 'flex-end',
    justifyContent: 'center',
    marginBottom: totalWidth*0.006,
  },
  tipsoneI: {
    width: totalWidth*0.019,
    height: totalWidth*0.019,
    resizeMode: 'contain',
    marginBottom: totalWidth*0.006,
  },
  tipsoneC: {
    fontSize: 12,
    color: '#ff4546',
  },
  first: {
    flex: 4,
    height: totalWidth*8.7/21,
  },
  two: {
    flex: 3,
    marginHorizontal: totalWidth*0.024,
    justifyContent: 'space-between',
  },
  second: {
    height: totalWidth*0.19,
  },
  third: {
    height: totalWidth*0.19,
  },
  one: {
    flex: 1,
    justifyContent: 'space-between'
  },
  switch: {
    flex: 1,
    backgroundColor: '#f6f6f6',
    alignItems: 'center',
    justifyContent: 'center',
  },
  swBox: {
    alignItems: 'center',
  },
  swText: {
    color: '#9c9c9c',
    fontSize: 8,
  },
  swImg: {
    marginTop: 3,
  },
  list:{
    flex: 1,
    overflow: 'hidden'
  },
  viewRow: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  head: {
    fontSize: 12,
    color: '#000000',
    textAlign: 'center'
  },
  listrow: {
    flexDirection: 'row',
    paddingVertical: totalWidth*0.015,
    paddingHorizontal: totalWidth*0.035,
  },
  rank: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rankIndex: {
    width: totalWidth*0.056,textAlign: 'center'
  },
  rankChange: {
    flexDirection: 'row',justifyContent: 'flex-end', alignItems: 'center', width: totalWidth*0.084
  },
  updown: {
    marginRight: totalWidth*0.01,
  },
  line: {width: totalWidth,height: 1},
  showAllW: {alignItems: 'center', justifyContent: 'center',height: totalWidth*0.08},
  showAll: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  showAllText: {
    fontSize: 10,color: '#bdbbbc',marginRight: 3
  },
  showAllIcon: {
    width: totalWidth*0.02,
    height: totalWidth*0.02,
    resizeMode: 'contain',
  }

});